<template>
  <div
    class="rounded-2xl shadow-md transform transition-transform duration-300 bg-gradient-to-br from-white to-gray-100 dark:from-gray-900 dark:to-gray-800 hover:scale-105 hover:shadow-xl hover:bg-gradient-to-r hover:from-blue-200 hover:to-purple-200 dark:hover:from-gray-700 dark:hover:to-gray-800"
  >
    <!-- 封面图片：脱离p-6，直接撑满宽度 -->
    <div
      v-if="cover"
      class="rounded-t-2xl overflow-hidden shadow-sm relative w-full aspect-[16/9]"
      :title="title"
    >
      <img
        :src="cover"
        alt="封面图片"
        class="absolute inset-0 w-full h-full object-cover"
        loading="lazy"
      />

      <!-- 置顶标志 -->
      <div
        v-if="isTop"
        class="absolute top-2 left-2 px-3 py-1 text-xs text-white bg-red-600 rounded-full"
      >
        置顶
      </div>
    </div>

    <!-- 其余内容加 p-6 内边距 -->
    <div class="p-6">
      <!-- 标签 -->
      <div class="flex flex-wrap gap-2 mb-3">
        <span
          v-for="tag in tags"
          :key="tag"
          class="text-xs px-3 py-1 rounded-full bg-green-100 text-green-400 dark:bg-green-900 dark:text-green-300 select-none hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-800 dark:hover:text-blue-300 transition-colors duration-200"
        >
          {{ tag }}
        </span>
      </div>

      <!-- 标题 -->
      <h2
        class="text-lg md:text-xl font-semibold text-gray-800 dark:text-white mb-3 truncate"
        :title="title"
      >
        {{ title }}
      </h2>

      <!-- 摘要 -->
      <p class="text-sm text-gray-700 dark:text-gray-300 mb-6 line-clamp-3" :title="summary">
        {{ summary }}
      </p>

      <!-- 日期和分类 -->
      <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 select-none">
        <span>{{ date }}</span>
        <span>{{ category }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
defineProps({
  title: String,
  cover: String,
  tags: Array,
  summary: String,
  date: Date,
  category: String,
  isTop: Boolean, // 通过这个 prop 控制是否显示置顶标志
})
</script>

<style scoped>
/* 多行文本省略 */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
